{extend name="wap@style/base" /}
{block name="resources"}
<style>
    body {
        background: #fff;
    }

    .bar {
        height: 44px;
        margin-bottom: 10px;
    }

    .hui-media-content p,
    .hui-media-content h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hui-media-list li {
        padding: 8px 12px !important;
    }

    .hui-media-content {
        width: 80%;
    }

    .hui-media-list-img {
        width: 16vw !important;
        height: 16vw !important;
        border-radius: 3px;
    }

    .hui-media-list-img img {
        width: 100%;
        height: 100%;
    }

    .collection {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: space-between;
    }

    .collection div,
    .collection span {
        font-size: 13px;
        line-height: 1.5em;
        color: #999999;
        word-break: break-word;
    }

    .time {
        margin-top: 2vw;
    }
    #hui-header-sreach-icon::before{
        font-size: 25px !important;
    }
    .hui-media-list a {
        width: auto !important;
    }
</style>
{/block}

{block name="main"}
<div class="bar"></div>
<div class="hui-wrap">
    <div id="refreshContainer" class="hui-refresh">
        <div class="hui-refresh-icon"></div>
        <div class="hui-refresh-content hui-media-list">
            <ul id="list"></ul>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__STATIC__/ext/hui/js/hui-refresh-load-more.js"></script>
<script>
    // 上拉加载下拉刷新
    var page = 1;
    var page_size = 10;
    hui.refresh('#refreshContainer', refresh);
    hui.loadMore(getMore);
    // 渲染页面
    function listShow(data) {
        var html = '';
        for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="{:addon_url(\'Sns://wap/category/info\')}?info_id=' + data[i]
                        .info_id + '">'
                    html += '<div class="hui-media-list-img"><img src="' + nc.img(data[i].info_array
                            .img_cover) +
                        '" /></div></a>'
                    html += '<div class="hui-media-content">'
                    html += '<div class="collection">'
                    html += '<a href="{:addon_url(\'Sns://wap/category/info\')}?info_id=' + data[i].info_id + '">'
                    html += '<h1>' + data[i].info_array.title + '</h1>'
                    html += '</a>'
                    html += '<span onclick="delCollection(this,' + data[i].info_id + ')" data-collection="' + data[i]
                .is_collection + '">取消收藏</span>'
                html += '</div>'
                    html += '<div class="collection">'
                    html += '<p class="time">' + nc.time_to_date(data[i].info_array.add_time,'Y-M-D') + '</p>'
                    html += '</div>'
                    html += '</div>'
                    html += '</li>'
                }
                $('#list').append(html);
    }
    //加载更多
    function getMore() {
        nc.api("Sns.Member.getCollectionList", {
                "page": page,
                "page_size": page_size,
                "access_token":"{$access_token}"
            },
            function (res) {
                console.log(data);
                var data = res.list;
                listShow(data);
                //判断加载完毕
                if (data.length < page_size) {
                    hui.endLoadMore(true, '我是有底线的 ...');
                    return false;
                }
                page++;
                hui.endLoadMore();
            }, true)
    }
    // 下拉刷新
    function refresh() {
        hui.loading('加载中...');
        nc.api("Sns.Member.getCollectionList", {
                "page": 1,
                "page_size": page_size,
                "access_token":"{$access_token}"
            },
            function (res) {
                $('#list').empty();
                hui.closeLoading();
                console.log(res);
                var data = res.list;
                listShow(data);
                page = 2;
                //结束刷新
                hui.endRefresh();
                //重置加载更多状态
                hui.resetLoadMore();
                if (data.length == 0) {
                    hui.endLoadMore(true, '收藏里空空的，快去收藏');
                    return false;
                }
                if (data.length < page_size) {
                    hui.endLoadMore(true, ' ');
                    return false;
                }
            }, true)
    }
    // 取消收藏效果
    function delCollection(obj, info_id) {
        hui.confirm('您确认要取消收藏吗？', ['取消', '确定'], function () {
            nc.api("Sns.Category.isCollection", {
                "info_id": info_id,
                "is_collection": 0,
                'access_token': "{$access_token}"
            },
            function (res) {
                console.log($(obj).parentsUntil('li').parent().hide());
                hui.toast('已取消收藏');
            },
            true);
            
        }) 
    }
</script>
{/block}